iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Modern Web

Canvas 小錦囊系列 第 10

Day 10 - 用 canvas 復刻 小畫家 放大鏡

  • 分享至 

  • xImage
  •  

動手寫看看

目前只能做到放大...

  const [magnifier, setMagnifier] = useState(false); //是否放大中
  const [initScale, setInitScale] = useState(1); // 縮放尺寸
const dramImageByScale = (scale: number) => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    let imgWidth = canvas.width;
    let imgHeight = canvas.height;
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    const width = imgWidth * scale;
    const height = imgHeight * scale;
    const sx = canvas.width / 2 - width / 2; //x坐标
    const sy = canvas.height / 2 - height / 2; //y坐标
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(savedData, sx, sy, width, height);
  };
 const handleMouseUp = (event: any) => {
 ...
   case "magnifier":
      dramImageByScale(initScale);
      break;
  };
 const handleMouseDown = (event: any) => {
 ...
    switch (tool) {
...
      case "magnifier":
        if (magnifier) {
          setInitScale((prev) => (prev -= 0.1));
        } else {
          setInitScale((prev) => (prev += 0.1));
        }
        setMagnifier(!magnifier);
        saveCanvas();
        break;
      default:
        break;
    }
  };


上一篇
Day 9 - 用 canvas 復刻 小畫家 曲線
下一篇
Day 11 - 用 canvas 復刻 小畫家 多邊形
系列文
Canvas 小錦囊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言